<template>
	<el-card>
		<el-form :inline="true" :model="orderForm" @keyup.enter="getDataList">
			<el-form-item label="出运方式">
				<el-select v-model="orderForm.businessState" clearable filterable>
					<el-option v-for="item in businessOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="提单号">
				<el-input v-model="orderForm.orderNo" />
			</el-form-item>
			<el-form-item label="箱号">
				<el-input v-model="orderForm.boxNo" />
			</el-form-item>
			<el-form-item label="收据单号">
				<el-input v-model="orderForm.collectNo" />
			</el-form-item>
			<el-form-item label="始发港">
				<el-select v-model="orderForm.originId" filterable clearable placeholder="请选择">
					<el-option v-for="item in OriginOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="目的港">
				<el-select v-model="orderForm.destId" filterable clearable placeholder="请选择">
					<el-option v-for="item in DestOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="下单开始时间">
				<el-date-picker v-model="orderForm.orderDateStart" type="datetime" placeholder="请选择收获日期" />
			</el-form-item>
			<el-form-item label="下单结束时间">
				<el-date-picker v-model="orderForm.orderDateEnd" type="datetime" placeholder="请选择收获日期" />
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="DataListLoading" :data="orderDataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="dictType" label="序号" header-align="center" align="center">
				<template #default="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="下单时间" sortable header-align="center" align="center"> </el-table-column>
			<el-table-column prop="orderNo" label="订单号" header-align="center" align="center"> </el-table-column>

			<el-table-column prop="hourseNo" label="入仓号" header-align="center" align="center"> </el-table-column>

			<el-table-column prop="origin" label="始发地"  header-align="center" align="center"> </el-table-column>
			<el-table-column prop="dest" label="目的地"  header-align="center" align="center"> </el-table-column>

			<el-table-column prop="deliveryDate" label="交货日期" header-align="center" align="center"></el-table-column>
			<el-table-column prop="hourseDate" label="入仓日期" header-align="center" align="center"></el-table-column>
			<el-table-column prop="expressNum" label="件数" header-align="center" align="center"></el-table-column>

			<el-table-column prop="weight" label="毛重" header-align="center" align="center"></el-table-column>
			<el-table-column prop="volume" label="体积(kg)" header-align="center" align="center"></el-table-column>

			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="170">
				<template #default="scope">
					<el-button type="primary" link @click="showDictDataHandle(scope.row)">封箱</el-button>
					<el-dropdown :hide-on-click="false" class="drop-down">
						<span class="el-dropdown-link">
							更多
							<el-icon class="el-icon--right">
								<ArrowDown />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>
									<el-button type="primary" link @click="showDictDataHandle(scope.row)">出仓</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button type="primary" link @click="showDictDataHandle(scope.row)">删除</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button type="primary" link @click="showDictDataHandle(scope.row)">编辑</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">打印箱标签</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="currentPage"
			:page-sizes="pageSizes"
			:page-size="pageSize"
			:total="total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<add-pack ref="addPackRefs" />
		<!-- 新增 / 修改 -->
		<!-- <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update> -->
		<!-- 字典配置 -->
		<el-drawer v-if="dictDataVisible" v-model="dictDataVisible" :title="dictDataTitle" :size="800" :close-on-press-escape="false">
			<dict-data :dict-type-id="dictTypeId"></dict-data>
		</el-drawer>
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { getDataDictionary, useDictTypeAllApi } from '@/api/dict'
import { fetchWarning, myError } from '@/store/modules/common'
import store from '@/store'
const orderForm = reactive({
	businessState: '',
	boxNo: '',
	collectNo: '',
	orderNo: '',
	originId: '',
	destId: '',
	// orderTime: '',
	orderDateStart: '',
	orderDateEnd: ''
})
const businessOptions = ref<[]>([])
const OriginOptions = ref<[]>([])
const DestOptions = ref<[]>([])
const getDictionary = async (params: { dictType: string }) => {
	try {
		const res = await getDataDictionary(params)

		if (fetchWarning(res)) {
			return
		}
		let data = res.data || []
		console.log('字典数据', data)
		data.forEach((item: { dictType: any; dictLabel: any; dictTypeId: string }) => {
			switch (item.dictType) {
				case 'businessOptions':
				businessOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'startAddressOptionsFirst':
					OriginOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'destinationOptionsFirst':
					DestOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				default:
					console.warn('未知字典类型:', item.dictType)
			}
		})
	} catch (error) {
		console.error('获取字典失败', error)
	}
}
const initDic = () => {
	getDictionary({
		dictType: 'businessOptions'
	})
	getDictionary({
		dictType: 'startAddressOptionsFirst'
	})
	getDictionary({
		dictType: 'destinationOptionsFirst'
	})
}
initDic()
const DataListLoading = ref(false)
const orderDataList = ref<[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = [1, 10, 20, 50, 100, 200]
const total = ref(0)
const getDataList = () => {}
getDataList()
</script>
